import { useState, useEffect } from 'react';
import { DatePicker, Select } from 'antd';
import IconFont from '@/components/IconFont';
import { SelectBatchInput } from '@/pages/OrderModule/orderList/components/Filter/components/SelectBatchInput/index1';
import FieldWrapper from '@/pages/OrderModule/orderList/components/Filter/components/FieldWrapper';
import SelectShopModal from '@/pages/OrderModule/common/bizcomponents/SelectShopModal';
import { useFetch } from '@/pages/OrderModule/common/hooks/useFetch';
import { queryShopList } from '@/pages/OrderModule/common/bizcomponents/SelectShopModal/server';
import { orderSnOptions, logisticOptions } from './constant.js';

const { RangePicker } = DatePicker;
const { Option } = Select;

const dateFormat = "YYYY-MM-DD HH:mm:ss";

export const RenderOrderSn = ({ value, onChange, stageParams }) => <SelectBatchInput
  value={value}
  options={orderSnOptions}
  defaultSelectValue="afterSaleSn"
  handleSelectChange={(e) => stageParams.current.refundSn = e}
  onChange={v => onChange(v?.afterSaleSn)}
/>

export const RenderLogisticNo = ({ value, onChange, stageParams }) => <SelectBatchInput
  value={value}
  options={logisticOptions}
  placeholder="请输入快递单号"
  defaultSelectValue="refundLogisticsNo"
  handleSelectChange={(e) => stageParams.current.logisticNo = e}
  onChange={v => onChange(v?.refundLogisticsNo)}
/>

export const RenderSnArr = ({ value, onChange }) => {
  return <SelectBatchInput
    value={value}
    defaultSelectValue="orderSn"
    placeholder="系统订单号"
    onChange={v => onChange(v?.orderSn)}
  />
}

export const RenderOutOrderSnArr = ({ value, onChange }) => {
  return <SelectBatchInput
    value={value}
    defaultSelectValue="outOrderSn"
    placeholder=" 平台店铺订单号 "
    onChange={v => onChange(v?.outOrderSn)}
  />
}

export const RenderTime = ({ value, onChange, stageParams }) => {
  return <FieldWrapper
    label={<Select defaultValue={stageParams.current.timeType} onChange={e => stageParams.current.timeType = e} style={{ width: "108px" }}>
      <Option value="applyTime">申请时间</Option>
      <Option value="processTime">处理时间</Option>
      <Option value="unpackTime">售后拆包时间</Option>
      <Option value="finishedTime">售后完成时间</Option>
    </Select>}
  >
    <RangePicker value={value} format={dateFormat} showTime onChange={v => onChange(v)} />
  </FieldWrapper>
}

export const RenderEcStoreIdArr = ({ value, onChange }) => {

  const { data: platformShopResp, fetch: fetchPlatformShop } = useFetch(getShopOptions, {}, false);

  useEffect(() => {
    fetchPlatformShop();
  }, []);

  function getShopOptions(data) {
    return queryShopList(data).then((res) => {
      return res?.data?.records.map((item) => {
        return { value: item.id, label: item.storeName };
      });
    });
  }

  return <SelectShopModal
    style={{ marginBottom: 8 }}
    onChange={(data) => {
      if (data) {
        onChange([data]);
        return;
      }
    }}
  >
    <Select
      open={false}
      allowClear
      placeholder="所属店铺"
      value={value}
      options={platformShopResp}
      onClear={() => onChange([])}
      clearIcon={<IconFont type="iconguanbi2fill" style={{ fontSize: '14px' }} />}
    />
  </SelectShopModal>;
}

